<template>
  <div class="page">
    <div class="wrapper">
      <div class="content">
        <div class="header">用户注册</div>
        <a-form layout="vertical">
          <a-form-item label="用户名">
            <a-input
              v-model:value="userNametemp"
              class="input_style"
              placeholder="支持英文与数字，注册后不能修改"
            >
              <template #prefix>
                <user-outlined type="user" />
              </template>
            </a-input>
          </a-form-item>

          <a-form-item label="密码">
            <a-input
              v-model:value="passwordtemp"
              class="input_style"
              placeholder="8~20位字母、数字或特殊符号"
            >
              <template #prefix>
                <LockOutlined type="user" />
              </template>
            </a-input>
          </a-form-item>

          <a-form-item label="确认密码">
            <a-input
              v-model:value="phonetemp"
              class="input_style"
              placeholder="8~20位字母、数字或特殊符号"
            >
              <template #prefix>
                <LockOutlined type="user" />
              </template>
            </a-input>
          </a-form-item>

          <!-- <a-form-item>
            <div class="row">
              <a-checkbox @change="handleAgree"> </a-checkbox>
              <div>我同意此处应有LOGO</div>
              <a-button type="link">《用户服务协议》</a-button>
              <div>和</div>
              <a-button type="link">《隐私条款》</a-button>
            </div>
          </a-form-item> -->

          <a-form-item>
            <a-button type="primary" class="input_style" @click="handleRegister"
              >创建用户</a-button
            >
          </a-form-item>

          <!-- <a-form-item>
            <a-button type="link" class="input_style" @click="handleLogin"
              >已有账号，立即登录</a-button
            >
          </a-form-item> -->
        </a-form>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import {
  UserOutlined,
  LockOutlined,
  MobileOutlined,
} from '@ant-design/icons-vue';

export default defineComponent({
  components: {
    UserOutlined,
    LockOutlined,
    // MobileOutlined,
  },
  props: {
    userName: { type: String, default: '' },
    password: { type: String, default: '' },
    phone: { type: String, default: '' },
  },
  emits: [
    // 点击注册
    'handleRegister',
    // 手机号改变
    'phoneChange',
  ],
  setup(props, content) {
    // 用户名
    const userNametemp = ref<string>(props.userName);
    // 密码
    const passwordtemp = ref<string>(props.password);

    const phonetemp = ref<string>(props.phone);

    const handleRegister = () => {
      content.emit(
        'handleRegister',
        userNametemp.value,
        passwordtemp.value,
        phonetemp.value,
      );
    };

    const phoneChange = (e: InputEvent) => {
      content.emit('phoneChange', e);
    };
    return {
      handleRegister,
      phoneChange,
      userNametemp,
      passwordtemp,
      phonetemp,
    };
  },
});
</script>
<style lang="less" scoped>
.wrapper {
  height: calc(100vh - 95px);
  display: flex;
  align-items: center;
  justify-content: center;
  .content {
    width: 480px;
    height: 487px;
    border-radius: 30px;
    opacity: 0.9;
    background: white;
    padding: 0 39px;
    .header {
      font-size: 24px;
      line-height: 24px;
      font-weight: bold;
      color: #fca428;
      padding: 40px 0;
      text-align: left;
    }
    .input_style {
      height: 40px;
      width: 400px;
      border-radius: 20px;
    }
    .row {
      display: flex;
      align-items: center;
      line-height: 32px;
      button {
        padding: 0;
      }
    }
  }
}
</style>
